<template>
  <div class="search-page">
    <div class="search">
      <div class="search-header">
        <img class="search-img" src="//cs-static-assets.oss-cn-beijing.aliyuncs.com/jiudao_miniapp/search.png" alt="搜索image ">
        <!-- placeholder-style设置占位符的颜色，placeholder-class设置占位符的字体大小, mpvue支持v-model数据双向绑定 -->
        <input
          type="text"
          v-model="searchText"
          placeholder="搜索图书名称"
          class="search-input"
          focus
          placeholder-class="input-placeholder"
          placeholder-style="color: #bbb;"
          @confirm="handleSearch"
        />
        <i class="fa fa-times" @click="cleanSearchText"></i>
      </div>
      <div class="cancel" @click="handleCancel">取消</div>
    </div>
    <div class="content-field">
      <SearchBook v-if="!isSearchBook" :hotKeys="hotKeys" @updateSearchText="updateSearchTextAction"></SearchBook>
      <div v-if="isSearchBook">
        <div class="books-list" v-if="bookTotal > 0">
          <PreBook v-for="(item, index) in searchBookList" :key="index" :preBook="item" :hideLike="true"></PreBook>
        </div>
        <div class="no-data" v-if="bookTotal === 0">暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBook from './components/search-book'
import PreBook from '../../components/perbook'
import request from '../../utils/request'
export default {
  data() {
    return {
      hotKeys: {},
      searchText: '',
      searchBookList: [],
      bookTotal: 0,
      isSearchBook: false, // 控制书籍的列表和搜索热词的展示切换
      isRequesting: false // 是否数据在请求中，避免快速滑动，上拉加载进行的请求重复问题
    }
  },
  components: { SearchBook, PreBook },
  onLoad() {
    request({
      url: 'book/hot_keyword'
    }).then((res) => {
      this.hotKeys = res
    })
  },
  // 上拉加载更多
  onReachBottom() {
    // 请求在请求中
    if (this.isRequesting) {
      return
    }
    const bookLength = this.searchBookList.length
    // 如果获取到的书的数量和总数一样，上拉操作不再发送请求
    if (bookLength === this.bookTotal) {
      return
    }
    this.getBooks(bookLength)
  },
  methods: {
    cleanSearchText() {
      // 重置数据
      this.searchText = ''
      this.searchBookList = []
      this.bookTotal = 0
      this.isSearchBook = false
      this.isRequesting = false
    },
    handleCancel() {
      this.$emit('searchPageHide')
    },
    updateSearchTextAction(searchText) {
      this.searchText = searchText
      this.handleSearch()
    },
    getBooks(start) {
      wx.showLoading({
        title: '加载中',
      })
      this.isRequesting = true
      // 点击回车获取结果
      request({
        url: 'book/search',
        data: {
          start,
          count: 20,
          summary: 1,
          q: this.searchText
        }
      }).then((res) => {
        const { books = [], total = 0 } = res
        this.bookTotal = total
        this.searchBookList = this.searchBookList.concat(books)
        // 历史搜索存在storage
        this.setStorageSearchText()
        wx.hideLoading()
        this.isRequesting = false
      })
    },
    handleSearch() {
      this.isSearchBook = true
      this.getBooks(0)
    },
    setStorageSearchText() {
      const historyKeyList = wx.getStorageSync('historyKey') || []
      if (!historyKeyList.includes(this.searchText)) {
        historyKeyList.unshift(this.searchText)
        wx.setStorageSync('historyKey', historyKeyList)
      }
    }
  }
};
</script>

<style scoped>
.search {
  display: flex;
  width: 100%;
  justify-content: space-around;
  align-items: center;
  font-size: 28rpx;
  color: #bbb;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
  position: fixed;
  top: 0;
  background-color: #fff;
}
.search-header {
  border: 1px solid #eee;
  height: 80rpx;
  width: 480rpx;
  border-radius: 20px;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
}
.search-img {
  width: 35rpx;
  height: 30rpx;
}
.search-input {
  padding: 0 20rpx;
  width: 445rpx;
  color: #000;
}
.cancel {
  border: 1px solid #eee;
  border-radius: 20px;
  line-height: 80rpx;
  padding: 0 40rpx;
}
.content-field {
  margin-top: 120rpx;
}
.books-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.no-data {
  color: #bbb;
  font-size: 24rpx;
  text-align: center;
  line-height: 300px;
}
</style>